<template>
  <a-spin :spinning="loading">
    <a-card>
      <section slot="title">医生订单</section>
      <a-row :gutter="16">
        <a-col :span="5">
          <span class="label">订单类型：</span>
          <a-select v-model="search_data.type" class="w-full" allow-clear placeholder="请选择">
            <a-select-option v-for="item in orderTypeEnums" :value="item.value" :key="item.value"
              >{{item.name}}</a-select-option
            >
          </a-select>
        </a-col>
        <a-col :span="5">
          <span class="label">订单ID：</span>
          <a-input :max-length="100" allow-clear v-model="search_data.orderId" placeholder="请输入" />
        </a-col>
        <a-col :span="5">
          <span class="label">订单号：</span>
          <a-input :max-length="100" allow-clear v-model="search_data.orderNo" placeholder="请输入" />
        </a-col>
        <a-col :span="5">
          <span class="label">下单日期：</span>
          <a-range-picker @change="onChange"  v-model="createTime"/>
        </a-col>
        <a-col :span="5">
          <span class="label">订单状态：</span>
          <a-select v-model="search_data.payOrderStatus" class="w-full" allow-clear placeholder="请选择">
            <a-select-option v-for="item in orderStatusEnums" :value="item.value" :key="item.value"
              >{{item.name}}</a-select-option
            >
          </a-select>
        </a-col>
<!-- 
        <a-col :span="5">
          <span class="label">所属医生：</span>
          <a-select v-model="status" class="w-full" allow-clear placeholder="请选择">
            <a-select-option v-for="item in orderStatusEnums" :value="item.value" :key="item.value"
              >测试数据</a-select-option
            >
          </a-select>
        </a-col> -->

        <a-col :span="8">
          <a-button class="ml-18" type="primary" @click="search">查询</a-button>
          <a-button class="mx-8" @click="reset">重置</a-button>
          <a-button type="primary" ghost class="ml-10 border-5" @click="exportTable">导出</a-button>
        </a-col>
      </a-row>
      <a-table
        class="mt-16 order-table"
        :columns="columns"
        :data-source="data"
        :scroll="scroll"
        :pagination="pagination"
      >
      <template #type="type, data">
        {{ data.type == 1 ? '图文' : data.type == 2 ? '电话' :'音视频' }}
      </template> 
        <template #status="status, data">
          {{ data.status == 0|| data.status == 1? '待付款' : data.status == 2 ? '服务中' :'已完成' }}
        </template> 
        <template #totalPrice="totalPrice, data">
          {{ data.totalPrice }}
        </template>
        <template #payTime='payTime, data'>
          {{ data.payTime?$utils.formatTimestamp(data.payTime):'' }}
        </template>
        <template #action="action, data">
          <div class="flex items-center justify-between">
            <a-button @click="goCharts(data)" type="primary">
              查看
            </a-button>
            
          </div>
        </template>
      </a-table>
      <!-- <a-divider  /> -->
    </a-card>
    <particulars @upload="upload" ref="particulars"></particulars>
  </a-spin>
</template>
<script>
import particulars from './components/particulars.vue'
import { doctorPage } from '@/api/baseInfo'
import { tableMixins } from '@/utils/mixins'
export default {
  mixins: [tableMixins],
  components: {
    particulars
  },
  data() {
    return {
      loading: false,
      tabs: 'select1',
      orderId: undefined,
      createTime: [undefined, undefined],
      status: null,
      search_data: {},
      orderStatusEnums: [
        { value: 0, name: '待付款' },
        { value: 1, name: '已付款' },
        // { value: 3, name: '已完成' }
      ],
      orderTypeEnums: [
        { value: '1', name: '图文' },
        { value: '2', name: '电话' },
        { value: '3', name: '音视频' }
      ],
      data: [],
      columns: [
        { title: '订单ID', dataIndex: 'id', align: 'center', width: 140, scopedSlots: { customRender: 'id' } },
        { title: '订单号', dataIndex: 'no', align: 'center', width: 70, scopedSlots: { customRender: 'no' } },
       
        {
          title: '订单类型',
          dataIndex: 'type',
          align: 'center',
          width: 90,
          scopedSlots: { customRender: 'type' }
        },
       
        {
          title: '订单状态',
          dataIndex: 'status',
          align: 'center',
          width: 80,
          scopedSlots: { customRender: 'status' }
        },
        {
          title: '所属医生',
          dataIndex: 'doctorName',
          align: 'center',
          width: 80,
          scopedSlots: { customRender: 'doctorName' }
        },
        {
          title: '实付金额',
          dataIndex: 'totalPrice',
          align: 'center',
          width: 80,
          scopedSlots: { customRender: 'totalPrice' }
        },
        
        // {
        //   title: '支付方式',
        //   dataIndex: 'status',
        //   align: 'center',
        //   width: 80,
        //   scopedSlots: { customRender: 'status' }
        // },
        {
          title: '下单用户',
          dataIndex: 'userName',
          align: 'center',
          width: 80,
          scopedSlots: { customRender: 'userName' }
        },
        {
          title: '下单手机号',
          dataIndex: 'orderMobile',
          align: 'center',
          width: 100,
          scopedSlots: { customRender: 'orderMobile' }
        },
        
        {
          title: '支付时间',
          dataIndex: 'payTime',
          align: 'center',
          width: 80,
          scopedSlots: { customRender: 'payTime' }
        },
        {
          title: '操作',
          fixed: 'right',
          dataIndex: 'action',
          width: 160,
          scopedSlots: { customRender: 'action' },
          align: 'center'
        }
      ]
    }
  },
  computed: {},
  watch: {},
  async created() {
  	this.getData()
  },
  methods: {
    search() {
      this.pageNum = 1
      this.getData()
    },
    upload() {
      this.search()
    },
    delect(data) {
      this.$confirm({
        title: '删除',
        content: `是否确认取消订单？`,
        okText: '确定',
        okType: 'danger',
        cancelText: '取消',
        onOk: () => {
          console.log('删除')
          return
          this.loading = true
          deductionDetail({
            deductId: data.id
          })
            .then(res => {
              this.$message.success('删除成功！')

              this.search()

              this.loading = false
            })
            .finally(() => (this.loading = false))
        }
      })
    },
    goCharts(data) {
      this.$refs.particulars.open(data)
      this.$refs.particulars.getData(data)
    },

    getSearchParams() {
      console.log(this.createTime)
      return {
        pageNo: this.pageNum,
        pageSize: this.rowsNum,
        startOrderDate: this.$utils.getStartTime(this.createTime[0]),
        endOrderDate: this.$utils.getEndTime(this.createTime[1]),
        ...this.search_data
      }
    },
    getData() {
      this.loading = true
      doctorPage(this.getSearchParams())
        .then(data => {
          this.total = data.total
          this.data = data.list
        })
        .finally(() => (this.loading = false))
    },
    reset() {
      this.ceartTime = [undefined, undefined]
      this.search_data = {}
    }
  }
}

</script>
<style lang="less" scoped>
.ant-col {
  margin-bottom: 20px;
  display: flex;
  align-items: center;

  .label {
    flex-shrink: 0;
    width: 86px;
    text-align: right;
    font-size: 14px;
    color: #595959;
  }

  .w-full {
    flex: 1;
  }
}
</style>
